<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>对比 绝对定位 和 相对定位</title>

        <style type="text/css">

            .wrapper { border: 1px solid blue ; }

            .first {
                position: absolute ;
                top: 50px ;
                left: 300px ;
                width: 200px ;
                height: 200px ;
                background: purple ;
            }

            .second {
                height: 50px ;
                background: #dedede ;
            }

            .outer { margin-top: 200px ; }
            .third {
                position: relative ;
                top: -50px ;
                left: 700px ;
                width: 200px ;
                height: 200px ;
                background: green ;
             }
            .fourth { height: 100px ; background: #ff0 ; }

        </style>
    </head>
    <body>

        <h3>对比 绝对定位 和 相对定位</h3>

        <div class="wrapper">
            <div class="first">绝对定位</div>
            <div class="second"></div>
        </div>

        <div class="wrapper outer">
            <div class="inner third">相对定位</div>
            <div class="inner fourth"></div>
        </div>
        
    </body>
</html>